"use client"

import { getCourseAppointmentClients, getCourseAppointmentPackages, getCourseAppointmentAssistantCoaches } from "@/lib/appointmentService"
import { useState, useEffect } from "react"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { format, differenceInHours } from "date-fns"
import { Badge } from "@/components/ui/badge"
export default function AppointmentForm({
    appointment,
    campuses,
    coaches,
    courts,
}) {
    const [clients, setClients] = useState([]);
    const [packages, setPackages] = useState([]);
    const [assistantCoaches, setAssistantCoaches] = useState([]);

    const [coursePackageIds, setCoursePackageIds] = useState([]);

    useEffect(() => {
        getCourseAppointmentClients(appointment.id).then(setClients);
        getCourseAppointmentPackages(appointment.id).then((packages) => {
            setPackages(packages);
            setCoursePackageIds(packages.map(p => p.course_package_id));
        });
        getCourseAppointmentAssistantCoaches(appointment.id).then(setAssistantCoaches);
    }, [appointment.id]);

    const campus = campuses.find(c => c.id === appointment.branch_campus_id);
    const court = courts.find(c => c.id === appointment.court_id);
    const coach = coaches.find(c => c.id === appointment.coach_id);

    return (
        <div className="flex flex-col gap-4">
            {/* 基本信息 */}
            <Card>
                <CardHeader>
                    <CardTitle className="text-lg">基本信息</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="flex flex-col gap-2">
                        <input type="hidden" name="appointment_id" value={appointment.id} />
                        <input type="hidden" name="course_package_ids" value={coursePackageIds.join(",")} />
                        <div className="flex items-center  ">
                            <Label className="w-24 font-bold">校区名:</Label>
                            <span className="text-sm">{campus?.name}</span>
                        </div>
                        <div className="flex items-center  ">
                            <Label className="w-24 font-bold">场地名:</Label>
                            <span className="text-sm"   >{court?.name}</span>
                        </div>
                        <div className="flex items-center">
                            <Label className="w-24 font-bold">主教练:</Label>
                            <span className="text-sm">{coach?.name}</span>
                        </div>
                        <div className="flex items-center ">
                            <Label className="w-24 font-bold">时间段:</Label>
                            <span className="text-sm">{format(appointment.start_time, "HH:mm")} - {format(appointment.end_time, "HH:mm")}</span>
                        </div>
                        <div className="flex  items-center ">
                            <Label className="w-24 font-bold">调整时长:</Label>
                            <Input name="duration" className="h-8" type="number" min={0.5} defaultValue={differenceInHours(appointment.end_time, appointment.start_time)} step={0.5} />
                        </div>
                        <div className="flex items-center  ">
                            <Label className="w-24 font-bold">备注:</Label>
                            <Input name="memo" className="h-8" defaultValue={appointment.memo} placeholder="填写备注" />
                        </div>
                    </div>
                </CardContent>
            </Card>

            {/* 学员和课程包 */}
            <Card>
                <CardHeader>
                    <CardTitle className="text-lg">参与学员和课程包</CardTitle>
                </CardHeader>
                <CardContent>
                    {clients.map((client) => {
                        const clientPackage = packages.find(p => p.course_package.client_id === client.client_id)?.course_package;
                        return (
                            <div key={client.id} className="mb-1 border-b pb-1 last:border-b-0 last:mb-0">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-1">
                                        <span className="font-semibold">{client?.client?.name}</span>
                                        <Badge variant="outline">{clientPackage?.course_type}</Badge>
                                    </div>
                                    <div className="flex items-center gap-1 text-sm text-gray-600">
                                        <span>剩余课时:</span>
                                        <span className="font-medium">{clientPackage?.left_count || 0} 节</span>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </CardContent>
            </Card>

            {/* 助教信息 */}
            <Card>
                <CardHeader>
                    <CardTitle className="text-lg">助教信息</CardTitle>
                </CardHeader>
                <CardContent>
                    {assistantCoaches.map(assistant => (
                        <div key={assistant.coach_id} className="mb-1 border-b pb-1 last:border-b-0 last:mb-0">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-1">
                                    <span className="font-semibold">{coaches.find(c => c.id === assistant.coach_id)?.name}</span>
                                    <Badge variant="outline">助教</Badge>
                                </div>
                                <div className="flex items-center gap-1 text-sm text-gray-600">
                                    <span>提成比例:</span>
                                    <span className="font-medium">{assistant.teaching_commission_rate}%</span>
                                </div>
                            </div>
                        </div>
                    ))}
                </CardContent>
            </Card>
        </div>
    )
}
